<template>
  <cube-slide
    class="banner"
    :data="banners"
    :interval="2000"/>
</template>

<script type="text/ecmascript-6">
var defaultImg = require('@img/default-loading.png')

export default {
  name: 'Banner',
  data: function () {
    return {
      // banner数据
      banners: [
        {
          image: defaultImg
        },
        {
          image: defaultImg
        },
        {
          image: defaultImg
        }
      ]
    }
  },
  created: function () {
    this.initData()
  },
  methods: {
    initData: function () {
      this.$http.get('/main/banners')
        .then(data => {
          console.log(data)
          // 将imageUrl的字符串数组拼装成cube-slide需要的对象数组
          // key: image
          // value: url
          this.banners = data.map(item => {
            return { image: item }
          })
        }).catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
// 引用px2rem函数
// stylus使用别名需要加前缀~
// @import '~@css/style.styl'
.banner
  width: 100%
  height: px2rem(400)
  >>> .cube-slide-item
    img
      // 让图片宽高填充父容器
      width:100%
      height: 100%
      // 缩放图片，自适应
      object-fit : fit
</style>
